﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="myColorComboBox.ascx.cs" Inherits="UserControl_myColorComboBox" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script type="text/javascript">
        var toHex = function (value) {
            value = parseInt(value);
            var str = value.toString(16);
            
            if (str.length == 1) {
                str = "0" + str;
            }
            
            return str;
        };
        
//        function updateColor() {
//            var _RedSlider = <%= RedSlider.ClientID %>;//document.all.
//            var _GreenSlider = <%= GreenSlider.ClientID %>;//document.all.
//            var _BlueSlider = <%= BlueSlider.ClientID %>;//document.all.
//            var color = "#" +
//                toHex(_RedSlider.getValue()) +
//                toHex(_GreenSlider.getValue()) +
//                toHex(_BlueSlider.getValue());
//            color = color.toUpperCase();
//            //alert(color);
//            var _ColorPreview = <%= ColorPreview.ClientID %>;//document.all.
//            //_ColorPreview.setTitle("Color: " + color);
//            _ColorPreview.body.setStyle("background-color", color);
//            
//            var _lb_SelectColor = <%= lb_SelectColor.ClientID %>;//document.all.
//             //_lb_SelectColor.innerText = "Color: " + color;
//            _lb_SelectColor.setText("Color: " + color);
//        };
        
        function updateColor(_RedSlider,_GreenSlider,_BlueSlider,_ColorPreview,_lb_SelectColor) {
            var color = "#" +
                toHex(_RedSlider.getValue()) +
                toHex(_GreenSlider.getValue()) +
                toHex(_BlueSlider.getValue());
            color = color.toUpperCase();
            _ColorPreview.body.setStyle("background-color", color);
            _lb_SelectColor.setText("Color: " + color);
        };
        
//        function setColorText()
//        {
//            var _extDropField_Color = <%= extDropField_Color.ClientID %>;
//            var _RedSlider = <%= RedSlider.ClientID %>;//document.all.
//            var _GreenSlider = <%= GreenSlider.ClientID %>;//document.all.
//            var _BlueSlider = <%= BlueSlider.ClientID %>;//document.all.
//            var color = "#" +
//                toHex(_RedSlider.getValue()) +
//                toHex(_GreenSlider.getValue()) +
//                toHex(_BlueSlider.getValue());
//            color = color.toUpperCase();
//            
//            _extDropField_Color.setValue(color);
//        }
        function setColorText(_extDropField_Color,_RedSlider,_GreenSlider,_BlueSlider)
        {
            var color = "#" +
                toHex(_RedSlider.getValue()) +
                toHex(_GreenSlider.getValue()) +
                toHex(_BlueSlider.getValue());
            color = color.toUpperCase();
            
            _extDropField_Color.setValue(color);
        }
</script>

    <ext:Panel ID="Panel12" runat="server" Border="false">
        <Content>
            <ext:FormLayout ID="flayout1" runat="server" LabelStyle=" text-align:right; ">
                <Anchors>
                   <ext:Anchor Horizontal="100%">
                        <ext:DropDownField ID="extDropField_Color" runat="server" TriggerIcon="SimpleArrowDown" LabelStyle=" text-align:right; "
                             FieldLabel="颜色选择" Editable="false"  ForceSelection="false" >
                            <Component>
                                <ext:TabPanel ID="ExampleTabs" runat="server" ActiveTabIndex="0" EnableTabScroll="true"
                                    Border="true" Title="Center" Padding="0" Height="200" Width="250" >
                                    <Items>
                                        <ext:Panel ID="Panel1" runat="server"  Height="200" Width="250"  Title="常用色" >
                                            <Items>
                                                <ext:ColorPalette ID="colorpalette1" runat="server" >
                                                    <Listeners>
                                                        <Select Handler="#{extDropField_Color}.setValue('#'+color);" />
                                                    </Listeners>
                                                </ext:ColorPalette>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                    <Items>
                                        <ext:Panel ID="Panel2" runat="server" Layout="Fit" Title="自定义" >
                                            <Items>
                                                <ext:FormPanel 
                                                    ID="FormPanel1" 
                                                    runat="server" 
                                                    Width="250"
                                                    Height="200"
                                                    ButtonAlign="Left" LabelWidth="20"
                                                    Border="true"
                                                    BodyStyle="border-width:0 0 1 0;"
                                                    Padding="5">
                                                    <Items>
                                                        <ext:SliderField 
                                                            ID="RedSlider" 
                                                            runat="server" 
                                                            FieldLabel="红" 
                                                            LabelStyle="color:red;">
                                                            <Slider ID="Slider1" runat="server" MaxValue="255" Value="255" >
                                                                <Listeners>
                                                                    <%--<Change Fn="updateColor" />--%>
                                                                    <Change Handler="updateColor(#{RedSlider},#{GreenSlider},#{BlueSlider} ,#{ColorPreview}, #{lb_SelectColor});" />
                                                                </Listeners>
                                                                <Plugins>
                                                                    <ext:SliderTip ID="SliderTip1" runat="server">
                                                                        <GetText Handler="return toHex(thumb.value).toUpperCase();" />
                                                                    </ext:SliderTip>
                                                                </Plugins>
                                                            </Slider>  
                                                        </ext:SliderField>
                                    
                                                        <ext:SliderField 
                                                            ID="GreenSlider" 
                                                            runat="server" 
                                                            FieldLabel="绿" 
                                                            LabelStyle="color:green;">
                                                            <Slider ID="Slider2" runat="server" MaxValue="255" Value="255">
                                                                <Listeners>
                                                                    <%--<Change Fn="updateColor" />--%>
                                                                    <Change Handler="updateColor(#{RedSlider},#{GreenSlider},#{BlueSlider} ,#{ColorPreview}, #{lb_SelectColor});" />
                                                                </Listeners>
                                                                <Plugins>
                                                                    <ext:SliderTip ID="SliderTip2" runat="server">
                                                                        <GetText Handler="return toHex(thumb.value).toUpperCase();" />
                                                                    </ext:SliderTip>
                                                                </Plugins>
                                                            </Slider>  
                                                        </ext:SliderField>
                                    
                                                        <ext:SliderField 
                                                            ID="BlueSlider" 
                                                            runat="server" 
                                                            FieldLabel="蓝" 
                                                            LabelStyle="color:blue">
                                                            <Slider ID="Slider3" runat="server" MaxValue="255" Value="255">
                                                                <Listeners>
                                                                    <%--<Change Fn="updateColor" />--%>
                                                                    <Change Handler="updateColor(#{RedSlider},#{GreenSlider},#{BlueSlider} ,#{ColorPreview}, #{lb_SelectColor});" />
                                                                </Listeners>
                                                                <Plugins>
                                                                    <ext:SliderTip ID="SliderTip3" runat="server">
                                                                        <GetText Handler="return toHex(thumb.value).toUpperCase();" />
                                                                    </ext:SliderTip>
                                                                </Plugins>
                                                            </Slider>  
                                                        </ext:SliderField>
                                    
                                                        <ext:Panel 
                                                            ID="ColorPreview" 
                                                            runat="server" 
                                                            Border="false"
                                                            StyleSpec="margin:0px;border:1px solid #C0C0C0;"  
                                                            BodyStyle="background-color: #FFFFFF;" 
                                                            Height="50" 
                                                            >
                                                        </ext:Panel>
                                                    </Items>
                                                    <FooterBar>
                                                        <ext:Toolbar ID="Toolbar1" runat="server" Height="23" >
                                                            <Items>
                                                                <ext:Label ID="lb_SelectColor" runat="server" Text="Color: #FFFFFF" LabelStyle="font-weight:bold;"></ext:Label>
                                                                <ext:ToolbarFill runat="server" ID="toolfill1"></ext:ToolbarFill>
                                                                <ext:Button ID="btn_ok" runat="server" Text="OK">
                                                                    <Listeners>
                                                                        <%--<Click Handler="#{extDropField_Color}.setValue('#FFFFFF');" />--%>
                                                                        <%--<Click Fn ="setColorText" />--%>
                                                                        <Click Handler="setColorText(#{extDropField_Color},#{RedSlider},#{GreenSlider},#{BlueSlider} ,#{ColorPreview});" />
                                                                    </Listeners>
                                                                </ext:Button>
                                                            </Items>
                                                        </ext:Toolbar>
                                                    </FooterBar>
                                                </ext:FormPanel>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:TabPanel>
                            </Component>
                        </ext:DropDownField>
                    </ext:Anchor>
                </Anchors>
            </ext:FormLayout>
        </Content>
    </ext:Panel>
    